<template>
<div>

    <el-row>
        <el-col :span="22">
            <div class="query-container">
                <el-form :inline="true" :model="queryForm" class="query-form" label-width="80px">
                    <!-- 请假类型 -->
                    <el-col :span="6">
                        <el-form-item label="请假类型">
                            <el-select v-model="queryForm.type" placeholder="筛选请假类型" @change="query" size="small" clearable style="width:135px">
                                <el-option v-for="type in absenceType" :label="type.name" :value="type.value" :key="type.absenceId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- 请假时间 -->
                    <el-col :span="10">
                        <el-form-item label="请假时间">
                            <el-date-picker type="date" placeholder="开始日期" v-model="queryForm.startDate" size="small" style="flex: 1; width:130px ;" value-format="yyyy-MM-dd">
                            </el-date-picker>
                            <span>至</span>
                            <el-date-picker type="date" placeholder="结束日期" v-model="queryForm.planEndDate" size="small" style="flex: 1; width: 130px;" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- 操作按钮 -->
                    <el-col :span="6">
                        <el-form-item>
                            <div class="action-buttons">
                                <el-button type="primary" icon="el-icon-search" @click="query" size="small">查询</el-button>
                                <el-button type="success" icon="el-icon-plus" @click="newAbsence" size="small">新增请假</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <absence-table :absenceList="absenceList" @view="viewAbsence" @del="delAbsence" :isAudit="isFalse" @steps="viewSteps"></absence-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[7, 10, 15]" :page-size="queryForm.limit" background layout="prev, pager, total,sizes ,next, jumper" :total="total">
    </el-pagination>
    <absence-info :isShow="dialogController" :absenceType="absenceType" :id="id" :isSelf="isTrue" @reload="getAbsenceList"></absence-info>
    <absence-steps :isShow="stepController" :stepData="stepData"></absence-steps>
</div>
</template>

<script>
import AbsenceInfo from '@/components/AbsenceInfo.vue';
import AbsenceSteps from '@/components/AbsenceSteps.vue';
import AbsenceTable from '@/components/AbsenceTable.vue';

export default {
    components: {
        AbsenceInfo,
        AbsenceTable,
        AbsenceSteps
    },
    name: 'AbsenceList',
    comments: {
        AbsenceInfo,
        AbsenceTable,
        AbsenceSteps
    },
    data() {
        return {
            isTrue: true,
            isFalse: false,
            absenceType: [],
            absenceList: [],
            queryForm: {
                empno: '',
                type: '',
                startDate: '',
                planEndDate: '',
                ename: '',
                deptno: '',
                page: 1,
                limit: 7,
                stage: 0
            },
            total: 1,
            controller1: false,
            controller2: false,
            dialogController: false,
            id: 0,
            stepController:false,
            stepData:{}
        }
    },
    methods: {
        getAbsenceType() {
            this.$http.get('/getAbsenceType1').then((res) => {
                if (res.data.msg == "success") {
                    this.absenceType = res.data.data;
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        handleSizeChange(val) {
            this.queryForm.limit = val
            //console.log(`每页${val}条`)
            this.getAbsenceList()
        },
        handleCurrentChange(val) {
            this.queryForm.page = val
            //console.log(`当前${val}页`)
            this.getAbsenceList()
        },
        getAbsenceList() {
            this.$http.post('/getAbsence', this.queryForm).then((res) => {
                if (res.data.code == 200) {
                    this.absenceList = res.data.data;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    });
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        query() {
            this.queryForm.page = 1;
            this.getAbsenceList();
        },
        newAbsence() {
            this.id = 0
            this.dialogController = !this.dialogController
        },
        viewAbsence(row) {
            this.id = row.id
            this.dialogController = !this.dialogController
        },
        viewSteps(row){
            this.stepData = row
            this.stepController = !this.stepController
        },
        delAbsence(row) {
            if (row.stage == '0') {
                this.$http.get('/delAbsence?id=' + row.id).then(res => {
                    if (res.data == "success") {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getAbsenceList()
                    }
                })
            } else {
                this.$message.error('该申请已进入流程，无法删除')
            }
        },

       
    },
    mounted() {
        this.getAbsenceType();
        //this.getDeptList();
        this.queryForm.empno = localStorage.getItem("empno")
        this.queryForm.stage = 0
        this.getAbsenceList();
    }
}
</script>

<style>

</style>
